<template>
    <div class="pageMain">
        <div class="header">
            <van-nav-bar title="收藏夹" left-arrow @click-left="toBack" />
        </div>
        <div class="conBox">
            <div v-for="(item, index) in list" :key="index" class="product" @click="toDetail(item.productId)">
                <img :src="alPath + 'zhonghui/product/' + item.productPic" class="product-img">
                <div class="width-control">
                    <div class="one-line product-name">{{ item.productName }}</div>
                </div>
                <div class="flex-box">
                    <div class="product-price">￥<span class="big">{{ item.productPrice |
                getPriceFront }}</span>.{{ item.productPrice | getPriceEnd }}</div>
                    <!-- <div class="product-del" @click.stop="toDelete(item.productId)">删除</div> -->
                </div>
            </div>
            <img v-if="list.length==0" src="../../assets/tip_content.png" class="content-tip">

        </div>

    </div>

</template>

<script>
import { alPath } from "../../network/request";
import { listCollectProduct } from "../../network/product";
export default {
    name: 'HomeR',
    data() {
        return {
            alPath,
            list: []


        }
    },
    mounted() {

    },
    methods: {
        getData: function () {
            listCollectProduct({
                userId: localStorage.userId
            }).then(res => {
                if (res.flag) {
                    this.list = []
                    res.data.forEach(item => {
                        this.list.push(...item.products)
                    })
                    console.log(this.list);

                }
            })

        },
        toDetail: function (product_id) {
            localStorage.product_id = product_id;
            this.$router.push('/detail')
        },


        toBack() {
            this.$router.go(-1)
        },

    },
    created() {
        this.getData();
    },
    //计算属性
    computed: {

    },
    filters: {
        toFixed2: function (value) { //保留两位小数
            return (value * 1).toFixed(2);
        },
        getPriceFront: function (value) { //获取价格整数部分
            return (value * 1).toFixed(2).toString().split(".")[0];
        },
        getPriceEnd: function (value) { //获取价格小数部分
            return (value * 1).toFixed(2).toString().split(".")[1];
        }

    }

}

</script>

<style lang='less' scoped>
.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}

.conBox {
    padding: 114px 24px 0;
}

.pageMain {
    width: 100%;
    height: 100vh;
    background: #f2f2f2;
    overflow: scroll;
}



.padding-box {
    width: 100%;
    padding: 24px 24px 0;
}

.product {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    width: 100%;
    height: 224px;
    padding: 24px 24px 24px 224px;
    background: #FFF;
    border-radius: 16px;
    margin-bottom: 24px;
}

.product-img {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 176px;
    height: 176px;
    border-radius: 16px;
}

.width-control {
    width: 100%;
}

.one-line {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.product-name {
    font-size: 28px;
    color: #333;
}

.product-title {
    font-size: 24px;
    color: #999;
}

.product-price {
    font-size: 24px;
    font-weight: bold;
    color: #FF3B14;
}

.product-price .big {
    font-size: 32px;
}

.product-del {
    width: 84px;
    font-size: 28px;
    color: #666;
    text-align: right;
}

.content-tip {
    display: block;
    width: 316px;
    margin: 100px auto;
}
</style>